/*
 * Copyright (C) 2012 David Geary. This code is from the book
 * Core HTML5 Canvas, published by Prentice-Hall in 2012.
 *
 * License:
 *
 * Permission is hereby granted, free of charge, to any person 
 * obtaining a copy of this software and associated documentation files
 * (the "Software"), to deal in the Software without restriction,
 * including without limitation the rights to use, copy, modify, merge,
 * publish, distribute, sublicense, and/or sell copies of the Software,
 * and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * The Software may not be used to create training material of any sort,
 * including courses, books, instructional videos, presentations, etc.
 * without the express written consent of David Geary.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
*/
var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var CENTROID_STROKE_STYLE = 'rgba(0, 0, 0, 0.5)',
    CENTROID_FILL_STYLE   = 'rgba(80, 190, 240, 0.6)',
    RING_INNER_RADIUS = 35,
    CENTROID_RADIUS = 10;




var circle = {
    x:canvas.width/2,
    y:canvas.height/2,
    radius:150

};

//圆心
function drawCentroid(){
    context.beginPath();
    context.save();

    context.strokeStyle = CENTROID_STROKE_STYLE;
    context.fillStyle = CENTROID_FILL_STYLE;
    context.arc(circle.x, circle.y, CENTROID_RADIUS, 0 , Math.PI * 2, false);

    context.stroke();
    context.fill();
    context.restore();
}

function drawRing(){
    drawRingOuterCircle();
    context.arc(circle.x,circle.y, circle.radius + RING_INNER_RADIUS, 0 , Math.PI * 2,false);
    context.fillSyle = 'rgba(100,140,230,0.1)';
    context.fill();
    context.stroke();
}

function drawRingOuterCircle(){
    context.shadowColor='rgba(0,0,0,0.7)';
    context.shadowOffsetX = 3;
    context.shadowOffsetY = 3;
    context.shadowBlur = 6;
    context.beginPath();
    context.arc(circle.x,circle.y, circle.radius + RING_INNER_RADIUS + 20, 0 , Math.PI * 2,true);
    context.stroke();
}

drawCentroid();
drawRing();